let form = layui.form;
//-----------发送请求，获取内容将数据库内容渲染到页面----------------
function renderLink() {
    $.ajax({
        url: 'admin/links',
        success: function (res) {
            console.log(res);
            //利用模板引擎将数据渲染到页面
            let html = template('tpl-link', res);
            $('tbody').html(html);
        }
    })
}
renderLink();


// ------------实现删除效果------------------------------------------
$('tbody').on('click', 'button:contains("删除")', function () {
    let id = $(this).data('id');
    //先弹出层
    layer.confirm('确认要删除吗', function (index) {
        //发送请求
        $.ajax({
            type: 'DELETE',
            url: 'admin/links/' + id,
            success: function (res) {
                console.log(res);
                layer.msg(res.message);
                if (res.status === 0) {
                    renderLink();
                }
            }
        })
        layer.close(index);
    });

})

// ------------------实现编辑效果--------------------------------------
let id;
// let form = layui.form;
$('tbody').on('click', 'button:contains("编辑")', function (res) {
    // 自定义属性值
    let data = $(this).data(); // data() 不填参数，获取元素所有的 data-xxx 属性
    console.log('自定义属性', data);
    id = $(this).attr('link');
    console.log("id" + id);
    //  console.log(id);
    // 出现弹层
    editIndex = layer.open({
        type: 1,
        title: '编辑链接',
        content: $('#tpl-edit').html(),
        area: ['500px', '400px'],
        success: function () {
            //实现数据回填写
            console.log(data.linkicon)
            $('#editImg').attr('src', 'http://localhost:8888/uploads/' + data.linkicon);
            form.val('formTest', data);
        }
    });



});

//点击按钮，实现文件域的触发模式
$('body').on('click', 'button:contains("上传图片")', function () {
    $('#file').trigger('click');
})
// 文件域的文件切换的时候
let fileObj;
$('body').on('change', '#file', function () {
    // console.log(123)
    fileObj = this.files[0];
    let url = URL.createObjectURL(fileObj);
    console.log('url', url);
    $('#editImg').attr('src', url).css({
        height:"35px",
        background:"black"
    });

})
// ----------------------  点击确认修改，完成修改 ---------------------
$('body').on('submit', '.edit-form', function (e) {

    e.preventDefault();
    // 获取数据
    let fd = new FormData(this);
    console.log('fd111', fd);

    fd.append('linkicon', fileObj)
    fd.forEach((value, key) => {
        console.log(key, value)
    })
    // 发送ajax请求，实现编辑
    $.ajax({
        type: 'PUT',
        url: 'admin/links/' + id,
        data: fd,
        processData: false,
        contentType: false,
        success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {
                // 重新渲染页面
                renderLink();
                // 关闭弹层
                layer.close(editIndex);
            }
        }
    });
})




/// ------------实现添加效果------------------------------------------


$('button:contains("添加链接")').on('click', function () {
    // 出现弹层
    addIndex = layer.open({
        type: 1,
        title: '添加链接',
        content: $('#tpl-add').html(),
        area: ['500px', '400px'],
        success: function () {
           
           
        }
    });
})

 //点击按钮，实现文件域的触发模式

// 文件域的文件切换的时候
let ImgObj;
$('body').on('change', '#file', function () {
    // console.log(123)
    
    fileObj = this.files[0];
    let url = URL.createObjectURL(fileObj);
    console.log('url', url);
    $('#addtImg').attr('src', url).css({
        height:"35px",
        background:"black"
    });
    // $('#addtImg').attr('src', 'http://localhost:8888/uploads/' + url);

})
// ----------------------  点击 确认添加，完成添加 ---------------------
$('body').on('submit', '.add-form', function (e) {
    console.log('888')
    e.preventDefault();
    let fd = new FormData(this);
    
    console.log('fd',fd);
    fd.forEach((value,key)=>{
        console.log(key,value)
    });
    fd.append('linkicon', fileObj);

    // Ajax提交
    $.ajax({
        type: 'POST',
        url: 'admin/links',
        data: fd,
        processData: false,
        contentType: false,
        success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {
                console.log('999')
                renderLink();
                // 关闭弹层
                layer.close(addIndex);
            }
        }
    });
})

